<!DOCTYPE html>
<html>
<head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">

    class GreetingES6 extends React.Component {
        constructor(props){
            super(props);
            this.state = {
               age:18,
            };
            this.handleClick = this.handleClick.bind(this);
        }
        handleClick() {
            alert("Hello, " + this.props.name);
        }
        // if you feel annoying to use bind
//        handleClick = () => {
//            alert(this.state.message);
//        }
        render() {
            return <h1>
                Hello, {this.props.name} , age : {this.state.age}
                <button onClick={this.handleClick}>
                    Say hello
                </button>
            </h1>;
        }
    }
    GreetingES6.defaultProps = {
        name:"madao"
    }


    var SetIntervalMixin = {
        componentWillMount: function() {
            console.log("componentWillMount");
        },

        componentWillUnmount: function() {
            console.log("componentWillUnmount");
        }
    };


    var Greeting = React.createClass({
        mixins: [SetIntervalMixin], // Use the mixin
        getDefaultProps : () => {name:"madao"},
        getInitialState(){
            return {
                age:18,
            };
        },
        //this is not necessary because it binds all methods:
        handleClick() {
            alert("Hello, " + this.props.name);
        },
        render: function() {
            return <h1>
                Hello, {this.props.name}, age : {this.state.age}
                <button onClick={this.handleClick}>
                    Say hello
                </button>
                </h1>;
        }
    });

    ReactDOM.render(
        <div>
            <GreetingES6/>
            <Greeting/>
        </div>,
        document.getElementById("example")
    );

</script>
</body>
</html>

